<template>
    <div class="classify app_content">
        <!-- 导航栏 -->
        <div class="header_body">
            <header-nav :leftArrow="false" titelText="分类"> </header-nav>
        </div>

        <!-- 中间 -->
        <div class="warp_body">
            分类页面--上传
            <br>
            <br>
            <br>
            <uploader :uploadConfig="uploadConfig" @file="file"></uploader>
        </div>
        <!-- 底部 -->
        <div class="footer_body">
            <footer-nav></footer-nav>
        </div>
    </div>
</template>

<script setup name="Classify">
import uploader from '@/components/uploader'

let classifyId = ref(""); // 分类id
let classifyActive = ref(0); // 是否是选择中分类
let resetScroll = ref(0); // 滚动记录
let isLodding = ref(true) // 是否加载中
let uploadConfig = reactive({
    max: 1
})

let freshMap = reactive({
    refreshLoad: false, // 是否刷新
    listLoading: false, // 是否加载中
    listFinished: false, // 是否加载完成标识
})

const file = (e) => {
    console.log('fileObject ', e)
    console.log('fileObject ', e.file)
    console.log('fileObject ', e.objectUrl)
}

const cardAttr = reactive({
    columnNum: 2,
    gutter: 10,
    itemClass: "recommend_item",
}); // 商品卡片参数

const classMap = reactive({
    refreshClass: "classify_refresh_box",
}); // 分类样式

//下拉刷新
const onRefresh = () => {
    freshMap.listFinished = false;
    freshMap.listLoading = true;
};

// 触底加载
const onLoad = () => {
    freshMap.listFinished = true;
};

// 点击分类
const chioceClassify = (item) => {
    classifyId = item?.id;
    resetScroll.value += 1;
}

const afterRead = (event) => {
    console.log('dddd');
    const { file } = event.detail;
    console.log('file...', file);
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
        url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
            // 上传完成需要更新 fileList
            const { fileList = [] } = this.data;
            fileList.push({ ...file, url: res.data });
            this.setData({ fileList });
        },
    });
}


onMounted(async () => {

});
</script>
<style lang="less" scoped>
.classify {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .warp_body {
        display: flex;

        .warp_left {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        .warp_right {
            flex: 1;
        }
    }
}
</style>
